import React from 'react';
import { Form, Icon, Input, Button, Checkbox, message } from 'antd';

import './index.scss';

class LoginModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rememberAccount: { 
        email: '', 
        password: '', 
        remember: true
      }
    };
    let rememberAccount = window.localStorage.getItem('account');
    if (rememberAccount) {
      this.state.rememberAccount = JSON.parse(rememberAccount);
    }
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let params = {
          email: values.email,
          password: values.password,
        };
        window.axios.get('/login', { params })
        .then((response) => {
          if (values.remember) {
            window.localStorage.setItem('account', JSON.stringify({ ...params, remember: values.remember }));
          } else {
            window.localStorage.setItem('account', JSON.stringify({ email: '', password: '', remember: values.remember }));
          }
          window.localStorage.setItem('user', JSON.stringify(response.data));
          window.user = response.data;
          this.props.loginSuccess();
          this.closeLoginModal();
          message.success('登录成功！');
        })
        .catch((error) => {
          console.log(error);
          message.error('账号或密码输入有误！');
        });
      }
    });
  };

  closeLoginModal = () => {
    this.props.form.resetFields();
    this.props.onClose();
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <Form.Item>
          {getFieldDecorator('email', {
            rules: [{ required: true, message: '请输入网易邮箱！' }],
            initialValue: this.state.rememberAccount.email
          })(
            <Input
              size="large"
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="email"
              placeholder="邮箱"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '请输入密码！' }],
            initialValue: this.state.rememberAccount.password
          })(
            <Input
              size="large"
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="密码"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: this.state.rememberAccount.remember,
          })(<Checkbox>记住账号</Checkbox>)}
          {/* <a className="login-form-forgot" href="/">
            忘记密码
          </a> */}
          <Button size="large" type="primary" htmlType="submit" className="login-form-button">
            登录
          </Button>
          <Button size="large" onClick={this.closeLoginModal} className="login-form-button">
            取消
          </Button>
          {/* 如果没有账号请 <a href="/">注册！</a> */}
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create({ name: 'Login_modal' })(LoginModal);
